<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"/>
	<script>
	
	var go = $.ajax({
        type: 'POST',
        data: {fof: 'bar'}
    })
    .done(function(results) {
        // Code here won't execute until response received from AJAX
    })
    .fail(function(msg) {
        console.debug('Error:');
        console.debug(msg);
    })
    .always(function() {
    });
	 function loginto()
	 { 
	   var uName=$("#userName").val();
	   var pswd=$("#passwd").val();
	   var val =false;
	   $("#loginmodal").hide();
	   $("#loadingimg").show();
	   setInterval(function(){
	    if(uName=="asu" && pswd=="asu")
		  val=true;
		if(val==true)
	     {
		  window.open('dashboard.html','_self');
		 }else{
		    $("#loadingimg").hide();
		   $("#loginmodal").show();
		 }
	   }, 3000);
	   //
	 }
	</script>
  </head>

  <body>
    <div class="container">
	  <div class="panel panel-default">
		  <div class="panel panel-default">
		  <center><img src="header.jpg" id="headerpage" class="panel-head" width="100%" height="15%"/>
		  <div class="panel panel-body">
		 <div class="jumbotron ">
		  <h1>Welcome to Online Payroll System</h1>
		  <p>Please login to proceed.. 
		  <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target=".bs-example-modal-sm"> LogIn <i class="glyphicon glyphicon-log-in"></i></button></p>
		 <div class="jumbotron-footer pull-right"><i class="glyphicon glyphicon-hand-right"></i> New user &nbsp;<a href=".bs-example-modal-lg" data-toggle="modal">SignUp</a> here.<small>(Coming Soon!!)</small></div> 
		 </div>
		</div>  
      <div class="panel-footer"><p class="text-right">Copyright : Ashutosh Sahu</p></div>
    </div>
      
      
    </div>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
	<!-- Modal for User Login-->
	<div class="modal fade bs-example-modal-sm" tabindex="-1" data-backdrop="static" data-keyboard="false" role="dialog"  aria-labelledby="mySmallModalLabel" aria-hidden="true">
	 <div class="modal-dialog" id="loadingimg" style="display:none">
	    <center><img src="loading.gif" id="loading-indicator" style="display:block;" />
		<P style="color:white ">Please do not refresh</p><center>
	  </div>
	<div class="modal-dialog modal-sm"  id="loginmodal">
    <div class="modal-content">
	  <div class="panel panel-default" >
	  <div class="modal-header">
               <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                 <h4 class="modal-title" id="myModalLabel">Login&nbsp;<small>Credential</small></h4>

       </div>
	  <div class="panel panel-body">
	  <form role="form">
        <div class="input-group ">
          <span class="input-group-addon">UserName</span>
          <input type="text" class="form-control" id="userName" placeholder="Enter UserName"/>
        </div>
		<br/>
		<div class="input-group">
          <span class="input-group-addon">Password</span>
          <input type="password" class="form-control" id="passwd" placeholder="Enter Password"/>
        </div>
        <div class="checkbox">
          &nbsp;<label><input type="checkbox"/> Remember me</label>
        </div>
		<center>
		<button type="button" class="btn btn-info" id="login" onClick="loginto();">Log In</button>		
		<button type="reset" class="btn btn-default">Reset</button>
		</center>
      </form>
	  </div>
	  </div>
    </div>
  </div>
</div>
	<!-- Modal for User Sign Up-->
	<div class="modal fade bs-example-modal-lg modal-key" tabindex="-1" data-backdrop="static" data-keyboard="false" data-width="760" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
	<div class="modal-dialog modal-sm">
    <div class="modal-content">
      
	  <div class="panel panel-default">
	  <div class="modal-header">
               <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                 <h4 class="modal-title" id="myModalLabel">Registration <small>Form</small></h4>

       </div>
	  <div class="panel panel-body">
      <form role="form">
	    <div class="input-group ">
          <span class="input-group-addon">First Name</span>
          <input type="text" class="form-control" id="userName" placeholder="Enter FirstName"/>
        </div>
		<br/>
		<div class="input-group">
          <span class="input-group-addon">Last Name</span>
          <input type="text" class="form-control" id="userName" placeholder="Enter LastName"/>
        </div>
		<br/>
        <div class="input-group">
          <span class="input-group-addon">UserName</span>
          <input type="text" class="form-control" id="userName" placeholder="Enter UserName"/>
        </div>
        <br/>
        <div class="input-group">
          <span class="input-group-addon">Password</span>
          <input type="password" class="form-control" id="pwd" placeholder="Enter password"/>
        </div>
		<br/>
		<div class="input-group">
          <span class="input-group-addon">Password</span>
          <input type="password" class="form-control" id="pwd" placeholder="Re-Enter password"/>
        </div>
		<br/>
		<div class="input-group">
          <span class="input-group-addon">&nbsp;Email Id &nbsp;</span>
          <input type="email" class="form-control" id="pwd" placeholder="Enter EmailId"/>
        </div>
		<br/>
        <div class="checkbox">
          &nbsp;<label><input type="checkbox"/>Accept all Terms and Conditons</label>
        </div>
        <center>
          <button type="submit" class="btn btn-info">Sign Up</button>
		  <button type="reset" class="btn btn-default">Reset</button>
        </center>
        
      </form>
	  </div>
	  </div>
    </div>
  </div>
</div>
  </body>

</html>
